<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width" />
	<title>子页面-三级</title>
	<link rel="stylesheet" type="text/css" href="/static/stylesheets/detail.css">
	<link rel="stylesheet" type="text/css" href="/static/stylesheets/flexcss.css">
</head>
<body class="HolyGrail">
	<?php $this->load->view('inc/header');?>
	<div class="head-img">
		<div class="group">
			<span class="title">监测省份</span>
			<span class="vice-title">Monitoring of the provinces</span>
		</div>
	</div>
	<main class="HolyGrail-body">
		<section class="right-panel HolyGrail-content">
			<div class="panel-header">
				<div class="breadcrumbs">
					<ul>
						<li>当前位置：</li>
						<li><a href="#">首页</a><i class="iconfont icon-arrowright"></i></li>
						<li><a href="#">监测省份</a><i class="iconfont icon-arrowright"></i></li>
						<li><a href="#">北京</a><i class="iconfont icon-arrowright"></i></li>
						<li><a href="#">戒台寺</a><i class="iconfont icon-arrowright"></i></li>
						<li><a href="#">监测点断面图</a></li>
					</ul>
				</div>
				<span class="title">监测信息</span>
			</div>
			<div class="panel-body">
				<div class="Grid">
					<div class="Grid-cell left">
						<img src="/static/images/bj-jts-hp-dmt.png" alt="">
					</div>
				</div>
				<span class="seprate-title">监测点</span>
			</div>	
		</section>
		<nav class="left-panel">
			<div class="head-block">
				<span class="title">监测省份</span>
				<span class="vice-title">provinces</span>
			</div>
			<div class="panel-body">
				<ul>
					<li class="dropdown">
						<i class="iconfont icon-arrowright-t open"></i>
<<<<<<< HEAD
						<a href="#" data-toggle="dropdown" class="open">北京</a>
						<ul class="dropdown-menu">
							<li class="active"><a href="#">戒台寺</a><i class="iconfont icon-arrowright"></i></li>
							<li><a href="#">香山</a><i class="iconfont icon-arrowright"></i></li>
							<li><a href="#">妙峰山</a><i class="iconfont icon-arrowright"></i></li>
						</ul>
					</li>
					<li class="dropdown"><i class="iconfont icon-arrowright-t close"></i><a href="#" data-toggle="dropdown">新疆维吾尔自治区</a></li>
					<li class="dropdown"><i class="iconfont icon-arrowright-t close"></i><a href="#" data-toggle="dropdown">陕西</a></li>
					<li class="dropdown"><i class="iconfont icon-arrowright-t close"></i><a href="#" data-toggle="dropdown">甘肃</a></li>
					<li class="dropdown"><i class="iconfont icon-arrowright-t close"></i><a href="#" data-toggle="dropdown">河南</a></li>
					<li class="dropdown"><i class="iconfont icon-arrowright-t close"></i><a href="#" data-toggle="dropdown">内蒙古</a></li>
=======
						<a data-toggle="dropdown" class="open">北京</a>
						<ul class="dropdown-menu">
							<li class="active"><a>戒台寺</a><i class="iconfont icon-arrowright"></i></li>
							<li><a>香山</a><i class="iconfont icon-arrowright"></i></li>
							<li><a>妙峰山</a><i class="iconfont icon-arrowright"></i></li>
						</ul>
					</li>
					<li class="dropdown"><i class="iconfont icon-arrowright-t close"></i><a data-toggle="dropdown">新疆维吾尔自治区</a></li>
					<li class="dropdown"><i class="iconfont icon-arrowright-t close"></i><a data-toggle="dropdown">陕西</a></li>
					<li class="dropdown"><i class="iconfont icon-arrowright-t close"></i><a data-toggle="dropdown">甘肃</a></li>
					<li class="dropdown"><i class="iconfont icon-arrowright-t close"></i><a data-toggle="dropdown">河南</a></li>
					<li class="dropdown"><i class="iconfont icon-arrowright-t close"></i><a data-toggle="dropdown">内蒙古</a></li>
>>>>>>> d427fe4957349cb4d3ef4f92e8fa1e56bd4d01d4
				</ul>
			</div>
		</nav>
	</main>
	<footer id="footer" class="HolyGrail-footer Grid Footer">
		<div class="logo Grid-cell u-1of4">
			<img src="/static/images/logo-o-.png" alt="logo">
		</div>
		<div class="nav-container Grid-cell Grid">
			<div class="Grid">
				<div class="Grid-cell">
					<ul class="Grid">
						<li><a href="#">首页</a></li>
						<li><a href="#">关于我们</a></li>
						<li><a href="#">免责声明</a></li>
					</ul>
				</div>
				<div class="Grid-cell u-textCenter">
					<ul>
						<li><a href="#">矿区滑坡监测</a></li>
						<li><a href="#">古滑坡监测</a></li>
						<li><a href="#">活断层监测</a></li>
					</ul>
				</div>
				<div class="Grid-cell u-1of2">
					<ul>
						<li><a href="#">联系我们</a></li>
						<li><a href="#">电话：12345678</a></li>
						<li><a href="#">地址：北京市一二三四五六七八路十号</a></li>
					</ul>
				</div>
			</div>
		</div>
	</footer>
	<script src="/static/javascripts/jquery-1.11.3.min.js"></script>
	<script src="/static/javascripts/main.js"></script>
	<script type="text/javascript">	
		$('[data-toggle="dropdown"]').on('click',function() {
			var others = $(this).closest('.dropdown').siblings().find('[data-toggle="dropdown"]')
			others.removeClass('open').siblings('.dropdown-menu').hide(650).siblings('.iconfont').removeClass('open').addClass('close');
			$(this).siblings('.dropdown-menu').find('li').removeClass('active');
			if ($(this).hasClass('open')){
				$(this).toggleClass('open').siblings('.dropdown-menu').slideUp(650);
			} else {	
				$(this).toggleClass('open').siblings('.dropdown-menu').slideDown(650);
			}
			$(this).siblings('.iconfont').toggleClass('open').toggleClass('close');
		})
		$('.dropdown-menu li').on('click', function() {
			$(this).siblings().removeClass('active');
			$(this).toggleClass('active').closest('ul').siblings('[data-toggle="dropdown"]').addClass('li-clicked');
			event.stopPropagation();
		});
	</script>
</body>
</html>
